import { StyleSheet } from "react-native";

export const createStyles = (colors: any) =>
  StyleSheet.create({
    container: {
      backgroundColor: colors.background,
      borderRadius: 8,
      marginHorizontal: 16,
      marginVertical: 8,
      padding: 16,
    },
    header: {
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
      marginBottom: 16,
    },
    title: {
      fontSize: 16,
      fontWeight: "500",
      color: colors.text.primary,
    },
    viewAll: {
      flexDirection: "row",
      alignItems: "center",
    },
    viewAllText: {
      fontSize: 14,
      color: colors.text.secondary,
      marginRight: 4,
    },
    membersContainer: {
      flexDirection: "row",
      flexWrap: "wrap",
      justifyContent: "flex-start",
    },
    memberItem: {
      width: "20%",
      alignItems: "center",
      marginBottom: 16,
    },
    avatar: {
      width: 50,
      height: 50,
      borderRadius: 25,
      marginBottom: 4,
    },
    memberName: {
      fontSize: 12,
      color: colors.text.primary,
      textAlign: "center",
      maxWidth: 50,
    },
    actionItem: {
      width: "20%",
      alignItems: "center",
      marginBottom: 16,
    },
    actionCircle: {
      width: 50,
      height: 50,
      borderRadius: 25,
      backgroundColor: colors.backgroundLight,
      justifyContent: "center",
      alignItems: "center",
      marginBottom: 4,
    },
  });
